<script setup>
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import { watch, reactive } from 'vue';
  import { GetAccountOverView } from '@/api/exdoctor/account'
  const appRoute = useRoute()
  const pageData = reactive({
    overview: [],
    dataLaoding: false,
  })

  const getOverview = () => {
    const params = {
      fn: appRoute.query.fn,
      start: appRoute.query.start,
      end: appRoute.query.end
    }
    pageData.dataLaoding = true
    GetAccountOverView(params.fn, params.start, params.end)
    .then((res) => {
      // console.log(res)
      pageData.overview = res.data.overview
      pageData.dataLaoding = false
    })
    .catch(() => {
      pageData.dataLaoding = false
    })
  }

  const watchRouteTs = watch(() => appRoute.query._ts, () => {
    getOverview()
  }, { immediate: true})

  onBeforeRouteLeave(() => {
    watchRouteTs()
  })
</script>
<template>
  <div class="view-container">
    <div class="title-box">
      <div class="title">账户数据分析</div>
      <div class="sub-title">- 综合概览 -</div>
    </div>
    <div v-loading="pageData.dataLaoding">
      <el-descriptions border :column="2">
        <el-descriptions-item
          v-for="item in pageData.overview"
          :key="item.key"
          :label="item.name"
        >
          {{ item.plain }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="tip-box">
      <div>提示说明：</div>
      <div>
        1. 根据账号情况，诊断报告最长可查询2年时间交易情况，最短5个交易日。
      </div>
      <div>
        2. 报告为过往交易数据分析所得，所展示的信息内容仅作为参考，不能作为具体的投资依据，您不应单纯依靠本产品而取代个人的独立判断，应根据当前市场做出投资决策。
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .view-container {
    padding: 0 20px 10px 20px;
    .title-box {
      // text-align: left;
      margin: 10px 0;
      line-height: 30px;
      .title {
        font-size: 22px;
        font-weight: 600;
      }
      .sub-title {
        color: #444;
        font-size: 15px;
        
      }
    }
    .tip-box {
      margin-top: 10px;
      line-height: 25px;
      font-size: 13px;
      color: #444;

    }
  }
</style>
